<template>
    <el-dialog title="插件列表" v-model="dialogVisible" width="1200px" :before-close="handleClose" class="customer-list-dialog" @close="handleClose" append-to-body>
                <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
              <el-form-item label="插件名称" prop="pluginsName">
                <el-input v-model="queryParams.pluginsName" placeholder="请输入插件名称" clearable @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item label="插件版本号" prop="pluginsVersion">
                <el-input v-model="queryParams.pluginsVersion" placeholder="请输入插件版本号" clearable @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
        <el-table v-loading="loading" :data="dataSource" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="插件名称" align="center" prop="pluginsName" />
          <el-table-column label="插件版本号" align="center" prop="pluginsVersion" />
          <el-table-column label="插件下载地址" align="center" prop="pluginsDownloadLink" />
          <el-table-column label="插件简介" align="center" prop="blurb" />
        </el-table>
    
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
    
    <script>
    import listMixin from '@/mixins/listMixin';
  import zk from '@/assets/images/zhankai.svg';
  import zd from '@/assets/images/zhedie.svg';
  export default {
    name: 'CustomerListModal',
    mixins: [listMixin],
  
    data() {
      return {
        urls: {
          list: '/order/plugins/list',
        },
        dialogVisible: false,
        customerName: '',
        manager: '',
        currentPage: 1,
        total: 1,
        customerOptions: [],
        managerOptions: [],
        tableHeight: 0,
        imgs: [zk, zd],
        price_level:[],
        showTree: true,
      };
    },
    methods: {
      handleRowClick(row) {
          this.$refs.table.toggleRowSelection(row);
      },
      handleClose() {
        this.dialogVisible = false;
        this.$emit('close');
      },
      open() {
        this.dialogVisible = true;
      },
      handleConfirm() {
          if (this.selectedRows.length === 0) return this.$modal.msgError('请选择插件')
        if(this.selectedRows.length > 1) return this.$modal.msgError('只能选择一个插件')
        this.$emit('ok', this.selectedRows)
        this.handleClose();
      },
      handleCreate() {
        // Handle create new customer logic
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      handleEdge() {
        this.showTree = !this.showTree;
        this.$nextTick(() => {
          setTimeout(() => {
            this.tableHeight = this.$refs.table.$el.scrollHeight;
          }, 200);
        });
      },
    }
  };
  </script>
    
    <style lang="scss" scoped>
  .customer-list-dialog {
    /* Add any custom styles here */
  }
  
  .filter-section {
    margin-bottom: 20px;
  
  }
  
  .text-right {
    text-align: right;
  }
  
  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
  
  .el-select {
    width: 100%;
  }
  
  /* Override element-plus styles if needed */
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  .left {
    width: 240px;
    // height: calc(100vh - 234px);
    border: 1px solid #e6ebf5;
    // position: relative;
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 60px;
  
    .fodder_list {
      z-index: 20;
  
      .fodder_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        cursor: pointer;
  
        .box {
          display: flex;
          justify-content: flex-start;
          align-items: center;
  
          svg {
            margin-right: 10px;
          }
  
          .fodder_name {
            font-size: 14px;
            color: #303133;
            width: 84px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
  
      .fodder_item.active,
      .fodder_item:hover {
        background-color: #f5f5f5;
      }
    }
  
    .buttons {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      position: absolute;
      bottom: 1px;
      width: 238px;
      border-top: 1px solid #e6ebf5;
      background-color: #fff;
      z-index: 21;
      font-size: 12px;
      color: #303133;
  
      .button {
        cursor: pointer;
        padding: 10px;
        text-align: center;
  
        i {
          margin-right: 5px;
        }
      }
  
      .button:not(:last-child) {
        border-right: 1px solid #e6ebf5;
      }
  
      .button:hover {
        color: #409eff;
      }
    }
  }
  
  .main {
    height: calc(100vh - 240px);
    overflow-x: scroll;
  
    .title {
      font-size: 12px;
      color: #606266;
      width: 100px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  
  .left-top {
    display: flex;
    justify-content: space-between;
    padding: 6px 20px;
    border-bottom: 1px solid #e6ebf5;
    align-items: center;
  
    .box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 24px;
      color: #303133;
      font-weight: bold;
    }
  }
  
  .fixed-icon {
    position: fixed;
    //left: 0;
    top: 400px;
    z-index: 999;
    background-color: #409eff;
    padding: 12px 2px;
    color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    display: flex;
    cursor: pointer;
  }
  
  .content {
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  
  .w-tree {
    width: calc(100% - 260px);
  }
  
  .w-all {
    width: 100%;
  }
  </style>